<!DOCTYPE html>
<html lang="zh-CN">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能家居</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            background: #fff url(images/backgroud.png) 50% 50% no-repeat;
            background-size: cover;
        }

        .dowebok {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 430px;
            height: 550px;
            margin: -300px 0 0 -215px;
            border: 1px solid #fff;
            border-radius: 20px;
            overflow: hidden;
        }

        .logo {
            width: 104px;
            height: 104px;
            margin: 50px auto 80px;
            background: url(images/login.png) 0 0 no-repeat;
        }

        .form-item {
            position: relative;
            width: 360px;
            margin: 0 auto;
            padding-bottom: 30px;
        }

        .form-item input {
            width: 288px;
            height: 48px;
            padding-left: 70px;
            border: 1px solid #fff;
            border-radius: 25px;
            font-size: 18px;
            color: #fff;
            background-color: transparent;
            outline: none;
        }

        .form-item button {
            width: 360px;
            height: 50px;
            border: 0;
            border-radius: 25px;
            font-size: 18px;
            color: #1f6f4a;
            outline: none;
            cursor: pointer;
            background-color: #fff;
        }

        #username {
            background: url(images/emil.png) 20px 14px no-repeat;
        }

        #password {
            background: url(images/password.png) 23px 11px no-repeat;
        }

        .tip {
            display: none;
            position: absolute;
            left: 20px;
            top: 52px;
            font-size: 14px;
            color: #f50;
        }

        .reg-bar {
            width: 360px;
            margin: 20px auto 0;
            font-size: 14px;
            overflow: hidden;
        }

        .reg-bar a {
            color: #fff;
            text-decoration: none;
        }

        .reg-bar a:hover {
            text-decoration: underline;
        }

        .reg-bar .reg {
            float: left;
        }

        .reg-bar .forget {
            float: right;
        }

        .dowebok ::-webkit-input-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok :-moz-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok ::-moz-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok :-ms-input-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        @media screen and (max-width: 500px) {
            * {
                box-sizing: border-box;
            }

            .dowebok {
                position: static;
                width: auto;
                height: auto;
                margin: 0 30px;
                border: 0;
                border-radius: 0;
            }

            .logo {
                margin: 50px auto;
            }

            .form-item {
                width: auto;
            }

            .form-item input,
            .form-item button,
            .reg-bar {
                width: 100%;
            }
        }




        a,
        address,
        b,
        big,
        blockquote,
        body,
        center,
        cite,
        code,
        dd,
        del,
        div,
        dl,
        dt,
        em,
        fieldset,
        font,
        form,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        html,
        i,
        iframe,
        img,
        ins,
        label,
        legend,
        li,
        ol,
        p,
        pre,
        small,
        span,
        strong,
        u,
        ul,
        var {
            padding: 0;
            margin: 0;
        }


        a {
            color: black;
            text-decoration: none;
        }

        ul {
            list-style: none;
            text-align: center;
        }

        #tab {
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            box-shadow: 0 0 2px #ddd;
            /*margin: 100px 0 0 100px;  */
            /*处理超出的内容*/
            overflow: hidden;
        }

        /*选项卡的头部*/
        #tab-header {
            background-color: #F7F7F7;
            height: 33px;
            text-align: center;
            position: relative;
        }

        #tab-header ul {
            /*width: 720px;*/
            position: absolute;
            left: -1px;
        }

        #tab-header ul li {
            float: left;
            width: 98px;
            height: 33px;
            line-height: 33px;
            padding: 0 1px;
            border-bottom: 1px solid #dddddd;
        }

        #tab-header ul li.selected {
            background-color: white;
            font-weight: bolder;
            border-bottom: 0;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            padding: 0;

        }

        #tab-header ul li:hover {
            color: orangered;
        }

        /*主要内容*/
        #tab-content .dom {
            display: none;
        }

        #tab-content .dom ul li {
            float: left;
            /*background-color: red;*/
            margin: 15px 10px;
            width: 100%;
            /*width: 225px;*/
        }

        #tab-content .dom ul li a:hover {
            color: orange;
        }

        div[data=online] {
            color: green
        }

        div[data=offline] {
            color: #aaa
        }
        div.widthchage{
            width:auto; display:inline-block !important; display:inline;
        }
    </style>
</head>

<body>
    <div class="dowebok" id="login">
        <div class="logo"></div>
        <div class="form-item">
            <input id="username" type="text" autocomplete="off" placeholder="账号">
            <p class="tip name err">请输入合法的账号</p>
        </div>
        <div class="form-item">

            <input id="password" type="password" autocomplete="off" placeholder="登录密码">
            <p class="tip pass err">邮箱或密码不正确</p>
        </div>
        <div class="form-item">

            <input id="server" autocomplete="off" placeholder="服务器地址">
            <p class="tip pass err">服务器地址</p>
        </div>
        <div class="form-item"><button id="submit">登 录</button></div>
        <div class="reg-bar">
            <a class="reg" href="javascript:alert('暂时不提供注册')">立即注册</a>
            <a class="forget" href="javascript:alert('不提供找回密码')">忘记密码</a>
        </div>
    </div>
    <div id="home" style="width:100%;height:100%;background-color: #ddd;display: none;">
        <!--选项卡-->
        <div id="tab">

            <!--主要内容-->


            <div id="tab-content">
                <div class="dom" id="tab-content-1" style="display: block;" style="text-align: center;">



                    <!--这里是内容-->
                </div>
                <div class="dom" id="tab-content-2" style="display: block;" style="text-align: center;">
                    <!--这里是内容-->
                    <div style="text-align:center" id="resh"></div>
                    <div id="list" style="padding-top: 30px;">
                    </div>
                </div>
                <div class="dom" style="display: block;" id="tab-content-3">
                    <!--这里是内容-->
                    <br />
                    <center><button
                            style="width:70%; color: #fff;background-color: #d9534f;border-color: #d43f3a;font-size: 22px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;touch-action: manipulation;cursor: pointer;user-select: none;background-image: none;border: 1px solid transparent;box-sizing: border-box;border-radius: 4px;"
                            onclick="javascript:alert('是否确认退出?')">退出登录</button></center>
                </div>
            </div>
            <!--选项的头部-->
            <div id="tab-header" style="position:fixed ; bottom:0px;">
                <ul>
                    <li class="selected" style="width: 33%;">添加设备</li>
                    <li style="width: 33%;">设备管理</li>
                    <li style="width: 33%;">个人信息</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="images/jquery.min.js"></script>
    <link rel="stylesheet" href="css/toast.css">
    <script src="js/toast.js"></script>
    <script type="text/javascript" src="js/message.js"></script>
    <script src="service.js"></script>

    <script>
        const x = {
            "switch": ["38on_", "38on"],
            "gatway": ["35"],
            "add": ["40tool"],
            "ira": ["41hwxon_", "41hwxon"],
            "socket": ["44Outlet_", "44Outlet"],
            "door": ["45dooron_", "45dooron"]
        }
        $(function () {
            $('input').val('')
            $('#submit').on('click', function () {
                if ($('#username').val().length > 16 || $('#username').val().length < 6) { alert("用户名长度错误"); return; }
                if ($('#password').val().length > 32 || $('#password').val().length < 6) { alert("用户密码长度错误"); return; }
                ip = $('#server').val()
                if (ip == "") { ip = "192.168.1.5:11211" }
                login({ "id": $('#username').val(), "pass": $('#password').val(), "server": ip }, function (lx, msg) {
                    if (lx == 1) {
                        /*登录成功*/
                        $.message({
            			    message:'登录成功',
                            type:'success',
                            duration:'1000'
		                });
                        Hookdisconnect(function(msg){$("#login").show(); $("#home").hide();$.message({message:msg,type:'info',duration:'3000'});})
                        $("#login").hide(); $("#home").show()
                        init_slide()
                        init_main_panel()
                    }else{
                        $.message({
                            message:msg,
                            type:'error'
                        });
                    }
                })
            })




            xinit()
        })
        function xinit() {
            $('#username').val(GetV("id"))
            $('#password').val(GetV("pass"))
            $('#server').val(GetV("ip"))
            if (GetV("auto") == "1") { $('#submit').submit() }



        }

        function GetV(name) {
            str = location.hash
            if (str == "" || str == undefined) { return ""; }
            xx = str.indexOf(name)
            if (xx < 0) { return "" }
            str = str.substring(xx + 1 + name.length)
            p = str.indexOf("&")
            if (p < 0) { return str } else { return str.substring(0, p) }
        }
        function init_slide() {
            $(function () {
                slide("#tab-content-2", 50, function (e) {
                    var that = this;
                    getlist(function (data) {
                        Interface_GET_ID_list(data);
                        that.settip("刷新完成"); setTimeout(function (fn) {
                            that.back.call();
                        }, 1000);
                    })

                }, $("#resh"));
            });
        }
        function Interface_GET_ID_list(_data) {
            for (i = 0; i < _data.length; i++) {
                data = _data[i]
                _ty = data.type == null ? "relay" : Base64.decode(data.type)
                _ti = data.title == null ? "继电器" + i : Base64.decode(data.title)
                _d=Base64.decode(data.data==null?"MA==":data.data)//默认为0
                console.log("=======port========")
                console.log(_d)
                console.log("===================")
                _isable = data.port == null ? 0 : 1
                _id = data.id == null ? i : Base64.decode(data.id)
                if ($("#t" + _id).length == 0) { CreatItem(_ty, _ti, _d, _id, null, _isable) }//不存在就创建
                console.log(_id)
                setOnline(_id, _isable)
            }
        }

        function init_main_panel() {
            $("#tab-header ul").css("width", getWidth())
            $("#list").height(getClientHeight() - $("#tab-header ul").height())
            //alert(getClientHeight()-$("#tab-header ul").height())
            /*CreatItem("relay", "test", 0, "DAA9CB1F395C56B8")
            CreatItem("relay", "test", 0, "2")
            CreatItem("relay", "test", 0, "3")*/
            ax = function (id) { return typeof id === 'string' ? document.getElementById(id) : id; }

            var titles = ax('tab-header').getElementsByTagName('li');
            var divs = ax('tab-content').getElementsByClassName('dom');
            // 判断  
            if (titles.length != divs.length) return;
            // 遍历  

            for (var i = 0; i < titles.length; i++) {
                $(titles[i]).attr("data", i)
                $(titles[i]).click(function () {
                    //console.log(this)
                    for (var ii = 0; ii < titles.length; ii++) { $(titles[ii]).removeClass("selected"); $(divs[ii]).hide() }
                    $(divs[$(this).attr('data')]).show()


                    $(this).addClass("selected")
                })
            }
            $(titles[0]).click()
        }
        function getWidth() {
            var winWidth;
            if (window.innerWidth) {
                winWidth = window.innerWidth;
            } else if ((document.body) && (document.body.clientWidth)) {
                winWidth = document.body.clientWidth;
            }
            return winWidth
        }
        function getClientHeight() {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            }
            else {
                var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
            }
            return clientHeight;
        }
        function CreatItem(name, titlex, zt, id, data) {

            if (zt == undefined) { zt = 0 }
            if (x[name] == undefined) { Imgsrc = "index" + x["switch"][zt] + ".png" } else { Imgsrc = "index" + x[name][zt] + ".png" }
            divx = document.createElement("div")
            Img = document.createElement("img")
            t = document.createElement("div")
            o = document.createElement("div")
            $(divx).css("display", "inline-block")
            $(divx).css("text-align", "center")
            $(divx).css("height", "100px")
            $(divx).css("padding-top", "20px")
            $(divx).css("width", $("#list").width() / 2)
            $(divx).attr("id", "t" + id)
            $(divx).attr("data", data)
            $(divx).attr("turn", zt)
            $(divx).attr("typea", name)
            $(Img).attr("width", "52px")
            $(Img).attr("height", "52px")
            $(Img).attr("src", Imgsrc)
            $(t).css("text-align", "center")
            $(t).html(titlex)
            //$(t).css("float", "left")
            $(t).addClass("widthchage")
            
            $(o).html("●")
            //$(o).css("float", "left")
            $(o).addClass("widthchage")
            $(Img).addClass("objimg")
            $(o).addClass("objonline")
            $(t).addClass("objtitle")
            $(divx).append(Img)
            $(divx).append(t)
            $(divx).append(o)
            $(divx).on("click",function () { onchange(id) })
            $("#list").append(divx)
            $(Img).after("<br/>")

        }
        function setOnline(id, _z) {
            $("#t" + id).off("click")
            if (typeof(_z)=="int"?_z==1:_z) {
                
                $("#t" + id).find('.objonline').attr("data", "online")
                $("#t" + id).on("click",function () { onchange(id) })
            } else {
                $("#t" + id).find('.objonline').attr("data", "offline")
                //$("#t" + id).off("click")//,function () { alert("设备不在线！") }
            }
        }
        function onchange(id, zt) {
            if (typeof (id) == "string" || typeof (id) == "object") {
                if (typeof (id) == "string") { $obj = $("[id='t" + id + "']"); /*console.log($obj)*/ } else { $obj = id }
                if (zt == undefined) { if ($($obj).attr("turn") == 1) { zt = 0 } else { zt = 1 } }
                name = $($obj).attr("typea")
                if (x[name] == undefined) { Imgsrc = "index" + x["switch"][zt] + ".png" } else { Imgsrc = "index" + x[name][zt] + ".png" }
                //console.log($obj.children)
                //console.log($($obj).next().find("img"))
                window.a = $obj
                
                $($obj).find('.objimg').attr('src', Imgsrc);
                title = $($obj).find('.objtitle').html()
                tip = zt == 1 ? '开启' + title + "中" : '关闭' + title + "中"
                if ($obj.attr("typea") == "relay") { showMessage(tip) }//;if(){}}
                Operat($obj.attr("typea"), id, zt)
                $($obj).attr("turn", zt)
                //console.log(Imgsrc,$($obj).next().find("img").attr("src"))
                //console.log(Imgsrc)

            }


        }



        const Base64 = {
            encode: (str) => {
                return window.btoa(unescape(encodeURIComponent(str)))
            },
            decode: (str) => {
                return decodeURIComponent(escape(window.atob(str)))
            }
        }
        /*
                        *obj--滑动对象
                        *offset--滑动距离（当滑动距离大于等于offset时将调用callback）
                        *callback--滑动完成后的回调函数
                    */
        var slide = function (obj, offset_, callback, showx) {
            var start,
                end,
                isLock = false,//是否锁定整个操作
                isCanDo = false,//是否移动滑块
                offset=0,
                inital=false,
                starttime=0,
                startobj=null,
                ismove=false
                isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
                hasTouch = 'ontouchstart' in window && !isTouchPad;
            //将对象转换为jquery的对象
            obj = $(obj);
            var objparent = obj.parent();
            /*操作方法*/
            var fn =
            {
                //移动容器
                translate: function (diff) {
                    obj.css({
                        "-webkit-transform": "translate(0," + diff + "px)",
                        "transform": "translate(0," + diff + "px)"
                    });
                },
                //设置效果时间
                setTranslition: function (time) {
                    obj.css({
                        "-webkit-transition": "all " + time + "s",
                        "transition": "all " + time + "s"
                    });
                },
                //返回到初始位置
                back: function () {
                    fn.translate(0 - offset);
                    fn.settip("");
                    //标识操作完成
                    isLock = false;
                },
                //设置提示
                settip: function (text) { if (typeof (showx) == "object") { $(showx).html(text) } }
            };
            //滑动开始
            //fn.settip=function(text){if( typeof(showx)=="object"){$(showx).html(text)}}
            function gettime(){return Date.parse(new Date())};
            obj.bind("touchstart", function (e) {
                ismove=false
                starttime=gettime()
                startobj=e;
                if (objparent.scrollTop() <= 0 && !isLock) {
                    var even = typeof event == "undefined" ? e : event;
                    //保存当前鼠标Y坐标
                    start = hasTouch ? even.touches[0].pageY : even.pageY;
                }
            });
            function callstart(e){
                if (objparent.scrollTop() <= 0 && !isLock) {
                    
                    //标识操作进行中
                    isLock = true;
                    isCanDo = true;
                    
                    
                    //消除滑块动画时间
                    
                    fn.setTranslition(0);

                }
            }
            //滑动中
            obj.bind("touchmove", function (e) {
                //if(gettime()-starttime<500){inital=false;return}
                if(ismove==false){callstart(startobj)}
                ismove=true
                if (objparent.scrollTop() <= 0 && isCanDo) {
                    //console.log("移动中")
                    if(end-start>offset_){fn.settip("▲松手刷新")}else{fn.settip("▼下拉刷新")}

                    var even = typeof event == "undefined" ? e : event;
                    //保存当前鼠标Y坐标
                    end = hasTouch ? even.touches[0].pageY : even.pageY;
                    if (start < end) {
                        even.preventDefault();
                        //消除滑块动画时间
                        fn.setTranslition(0);
                        //移动滑块
                        fn.translate(end - start - offset);
                    }
                }
            });
            //滑动结束
            obj.bind("touchend", function (e) {
                if(ismove==false){return}
                if (isCanDo) {
                    isCanDo = false;
                    //判断滑动距离是否大于等于指定值
                    if (end - start >= offset_) {//if (end - start >= offset) {
                        //console.log("出发条件",end - start)
                        //设置滑块回弹时间
                        fn.setTranslition(1);
                        //保留提示部分
                        fn.translate(0);
                        //执行回调函数
                        fn.settip("开始刷新")
                        if (typeof callback == "function") {

                            callback.call(fn, e);
                        }
                    } else {
                        //返回初始状态

                        fn.back();
                    }
                }
            });
        }
    </script>
</body>

</html>